<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API详情 - API文档管理系统</title>
    <link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap/font/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" th:href="@{/api-doc/}">
                    <i class="bi bi-book"></i>
                    API文档管理系统
                </a>
                <div class="navbar-nav ms-auto">
                    <a class="nav-link" th:href="@{/api-doc/}">
                        <i class="bi bi-house"></i>
                        首页
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/list}">
                        <i class="bi bi-list"></i>
                        API列表
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/app-service/list}">
                        <i class="bi bi-server"></i>
                        应用服务
                    </a>
                    <a class="nav-link" th:href="@{/api-doc/create}">
                        <i class="bi bi-plus-circle"></i>
                        新增API
                    </a>
                    <a class="nav-link" th:href="@{/swagger-ui/index.html}" target="_blank">
                        <i class="bi bi-code-square"></i>
                        Swagger UI
                    </a>
                </div>
            </div>
        </nav>

        <!-- 错误信息显示 -->
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
        </div>

        <!-- API详情 -->
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-book"></i>
                                    API详情
                                </h5>
                            </div>
                            <div class="col-md-6 text-end">
                                <div class="btn-group" role="group">
                                    <a th:href="@{/api-doc/test/{id}(id=${api.id})}" class="btn btn-info">
                                        <i class="bi bi-lightning"></i>
                                        测试API
                                    </a>
                                    <a th:href="@{/api-doc/edit/{id}(id=${api.id})}" class="btn btn-secondary">
                                        <i class="bi bi-pencil"></i>
                                        编辑
                                    </a>
                                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
                                        <i class="bi bi-trash"></i>
                                        删除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- API基本信息 -->
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <h6>
                                    <span th:class="'badge bg-' + ${api.method == 'GET' ? 'success' : (api.method == 'POST' ? 'primary' : (api.method == 'PUT' ? 'warning' : (api.method == 'DELETE' ? 'danger' : 'secondary')))}" 
                                          th:text="${api.method}">
                                        GET
                                    </span>
                                    <span th:text="${api.name}" class="ms-2">API名称</span>
                                </h6>
                                <p class="text-muted" th:text="${api.path}">/api/v1/example</p>
                                <p th:text="${api.description}">API描述信息</p>
                            </div>
                        </div>

                        <!-- 完整API地址与请求方式 -->
                        <div class="mb-4">
                            <h6 class="border-bottom pb-2">
                                <i class="bi bi-link"></i>
                                完整API地址与请求方式
                            </h6>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <p><strong>请求方法:</strong> 
                                                <span th:class="'badge bg-' + ${api.method == 'GET' ? 'success' : (api.method == 'POST' ? 'primary' : (api.method == 'PUT' ? 'warning' : (api.method == 'DELETE' ? 'danger' : 'secondary')))}" 
                                                      th:text="${api.method}">
                                                    GET
                                                </span>
                                            </p>
                                            <p><strong>完整API地址:</strong> 
                                                <span id="fullApiUrl" class="text-primary"></span>
                                                <button type="button" class="btn btn-outline-primary btn-sm ms-2" onclick="copyToClipboard()">
                                                    <i class="bi bi-clipboard"></i> 复制
                                                </button>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 关联应用服务信息 -->
                        <div class="mb-4" th:if="${appService}">
                            <h6 class="border-bottom pb-2">
                                <i class="bi bi-server"></i>
                                关联应用服务
                            </h6>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p><strong>服务名称:</strong> <span th:text="${appService.name}">服务名称</span></p>
                                            <p><strong>协议:</strong> <span th:text="${appService.protocol}">协议</span></p>
                                            <p><strong>IP地址:</strong> <span th:text="${appService.ipAddress}">IP地址</span></p>
                                        </div>
                                        <div class="col-md-6">
                                            <p><strong>端口:</strong> <span th:text="${appService.port}">端口</span></p>
                                            <p><strong>上下文路径:</strong> <span th:text="${appService.contextPath}">上下文路径</span></p>
                                            <p><strong>完整基础URL:</strong> <span th:text="${appService.baseUrl}">完整URL</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 请求参数 -->
                        <div class="mb-4" th:if="${api.requestParams}">
                            <h6 class="border-bottom pb-2">
                                <i class="bi bi-list-task"></i>
                                请求参数
                            </h6>
                            <pre th:text="${api.requestParams}" class="bg-light p-3 rounded">参数信息</pre>
                        </div>

                        <!-- 请求示例 -->
                        <div class="mb-4" th:if="${api.requestExample}">
                            <h6 class="border-bottom pb-2">
                                <i class="bi bi-code"></i>
                                请求示例
                            </h6>
                            <pre th:text="${api.requestExample}" class="bg-light p-3 rounded">请求示例</pre>
                        </div>

                        <!-- 响应示例 -->
                        <div class="mb-4" th:if="${api.responseExample}">
                            <h6 class="border-bottom pb-2">
                                <i class="bi bi-code-slash"></i>
                                响应示例
                            </h6>
                            <pre th:text="${api.responseExample}" class="bg-light p-3 rounded">响应示例</pre>
                        </div>

                        <!-- 其他信息 -->
                        <div class="row">
                            <div class="col-md-6">
                                <p>
                                    <strong>创建时间:</strong>
                                    <span th:text="${#temporals.format(api.createTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-01 12:00:00</span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p>
                                    <strong>更新时间:</strong>
                                    <span th:text="${#temporals.format(api.updateTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-01 12:00:00</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-3">
                    <a th:href="@{/api-doc/list}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i>
                        返回列表
                    </a>
                    <a th:href="@{/api-doc/test/{id}(id=${api.id})}" class="btn btn-info">
                        <i class="bi bi-lightning"></i>
                        测试API
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除这个API文档吗？此操作不可恢复。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn" th:attr="data-id=${api.id}">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.bundle.min.js}"></script>
    <script>
        // 确保DOM加载完成后添加事件监听器
        $(document).ready(function() {
            $('#confirmDeleteBtn').on('click', function() {
                const id = $(this).data('id');
                if (id) {
                    // 发送删除请求
                    $.post('/api-doc/delete/' + id)
                        .done(function() {
                            // 跳转到API列表页面
                            window.location.href = '/api-doc/list';
                        })
                        .fail(function() {
                            alert('删除失败');
                            $('#deleteModal').modal('hide');
                        });
                }
            });
        });
        
        // 构建完整URL
        function buildFullUrl(apiPath, appService) {
            let baseUrl = '';
            if (appService) {
                // 使用应用服务的完整URL
                baseUrl = appService.protocol + '://' + appService.ipAddress + ':' + appService.port + appService.contextPath;
            } else {
                // 默认URL
                baseUrl = 'http://localhost:8080';
            }
            
            // 确保基础URL不以斜杠结尾
            if (baseUrl.endsWith('/')) {
                baseUrl = baseUrl.slice(0, -1);
            }
            
            // 确保API路径以斜杠开头
            if (!apiPath.startsWith('/')) {
                apiPath = '/' + apiPath;
            }
            
            return baseUrl + apiPath;
        }
        
        // 复制到剪贴板
        function copyToClipboard() {
            const fullUrl = $('#fullApiUrl').text();
            navigator.clipboard.writeText(fullUrl).then(() => {
                alert('已复制到剪贴板: ' + fullUrl);
            }).catch(err => {
                console.error('复制失败: ', err);
                // 降级方案
                const textArea = document.createElement('textarea');
                textArea.value = fullUrl;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                alert('已复制到剪贴板: ' + fullUrl);
            });
        }
        
        // 页面加载完成后初始化
        $(document).ready(function() {
            // 获取API信息（从Thymeleaf模板中获取）
            const apiPath = /*[[${api.path}]]*/ '';
            const appService = /*[[${appService}]]*/ null;
            
            // 构建完整URL
            const baseUrl = buildFullUrl(apiPath, appService);
            const fullUrl = baseUrl; // 不添加查询参数
            
            // 显示完整API地址
            $('#fullApiUrl').text(fullUrl);
        });
    </script>
</body>
</html>